<template>
	<view class="play">
		<view class="normal-play">
			<view class="bg-fix">
				<view class="filter"></view>
				<image class="bg-img" :src="picUrl"></image>
			</view>
			<view class="header" :style="top">
				<view class="back" @tap="goback">
					<text class="cuIcon cuIcon-unfold"></text>
				</view>
				<view class="song-name">
					{{ songName }}
				</view>
				<view class="author">
					{{ author }}
				</view>
			</view>
			<view class="middle">
				<view class="middle-l">
					<view class="cd-wrapper">
						<view class="cd play" :class="!playing && 'pause'">
							<image class="play-img" :src="picUrl"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="progress-wrapper">
					<text class="time time-l">{{ formatedPlayTime }}</text>
					<view class="progress-bar-wrapper">
						<!-- <view class="progress-bar">
							<view class="bar-inner">
								<view class="progress" style="width: 67.1908px;"></view>
								<view class="progress-btn-wrapper" style="transform: translate3d(67.1908px, 0px, 0px);">
									<view class="progress-btn"></view>
								</view>
							</view>
						</view> -->
						<slider activeColor="#d44439" backgroundColor="#000000" block-size="16" :value="current" :max="duration" @changing="seek=true,current=$event.detail.value"
						 @change="change"></slider>
					</view>
					<text class="time time-r">{{ formatedDuration }}</text>
				</view>
				<view class="operators">
					<view class="icon loop">
						<text class="cuIcon cuIcon-newshot"></text>
					</view>
					<view class="icon left" @tap="prevSong">
						<text class="cuIcon cuIcon-backwardfill"></text>
					</view>
					<view v-if="playing" class="icon play-pause" @tap="pauseSong">
						<text class="cuIcon cuIcon-stop"></text>
					</view>
					<view v-if="!playing" class="icon play-pause" @tap="playSong">
						<text class="cuIcon cuIcon-video"></text>
					</view>
					<view class="icon right" @tap="nextSong">
						<text class="cuIcon cuIcon-play_forward_fill"></text>
					</view>
					<view class="icon favorite">
						<text class="cuIcon cuIcon-like"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	var util = require('../../utils/util.js');
	export default {
		data(){
			return {
				playList:[],//播放列表
				index:Number,//播放索引
				picUrl:'',//图片地址
				srcUrl:'',//音乐地址
				songName:'',//歌曲名
				author:'',//歌手名
				current:0,//已播放时长单位s
				formatedPlayTime: '00:00',//时间
				duration:0,//总时长单位s
				formatedDuration: '00:00',//格式化总时长
				playing: false,//是否处于播放状态
				seek: false //是否处于拖动状态
			}
		},
		onLoad() {
			this.current = 0;
			if(this.PlayInfo == undefined){//刷新页面回调到首页
				uni.switchTab({
					url: '/pages/index/index'
				});
			}else{
				this.index=this.PlayInfo.index
				this.playList=this.PlayInfo.playList
				this.srcUrl=`https://music.163.com/song/media/outer/url?id=${this.playList[this.index].id}.mp3`
				this.playing=true
				this.duration = this.music.duration
				this.formatedDuration = util.formatTime(this.duration)
				//播放中更新
				this.music.onTimeUpdate((e) => {
					this.duration = this.music.duration;
					this.formatedDuration = util.formatTime(this.duration)
					console.log('进行中')
					if(!this.seek){
						this.current = this.music.currentTime//获取已播放时长
					}
				});
				this.music.play();
				//音乐播放结束时更新
				this.music.onEnded((e) => {
					this.nextSong()
					this.current = 0
				});
				//音频完成更改进度事件
				this.music.onSeeked(() => {
					this.seek = false
				});
				//播放中更新
				this.music.onTimeUpdate((e) => {
					this.duration = this.music.duration;
					this.formatedDuration = util.formatTime(this.duration)
					console.log('进行中')
					if(!this.seek){
						this.current = this.music.currentTime//获取已播放时长
					}
				});
			}	
		},
		computed: {
			top(){
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				// #ifndef MP
					var top = `top:5px;`;
				// #endif
				// #ifdef APP-PLUS
					var top = `top:${StatusBar}px;`;
				// #endif
				// #ifdef MP-WEIXIN
					var top = `top:${StatusBar}px;`;
				// #endif	
				return top
			}
		},
		methods:{
			goback(){//返回按钮
				uni.navigateBack({
					delta: 1
				});
			},
			playSong(){//播放
				this.playing=true;			
				this.music.play();
			},
			pauseSong(){//暂停
				this.music.pause();
				this.playing=false;
			},
			prevSong(){//上一首
				if(this.index=='0'){
					Vue.prototype.PlayInfo.index = this.playList.length
					this.index = this.playList.length
				}
				Vue.prototype.PlayInfo.index --
				this.index --
			},
			nextSong(){//下一首
				if(this.index==this.playList.length-1){
					Vue.prototype.PlayInfo.index = 0
					this.index = 0
				}else{
					Vue.prototype.PlayInfo.index ++
					this.index ++
				}
				
			},
			//完成拖动事件
			change(e) {
				this.music.seek(e.detail.value)
			}
		},
		watch: {
			//监听音频地址更改
			index(e) {
				this.current = 0;
				this.srcUrl=`https://music.163.com/song/media/outer/url?id=${this.playList[this.index].id}.mp3`;
				this.picUrl=this.playList[this.index].al.picUrl;
				this.songName=this.playList[this.index].ar[0].name;
				this.author=this.playList[this.index].al.name;
				this.music.src = this.srcUrl;
				this.duration = this.music.duration;
				this.formatedDuration = util.formatTime(this.duration);
				this.music.play();//播放
			},
			//监听总时长改变
			duration(e) {
				this.formatedDuration = util.formatTime(e)
			},
			//监听当前进度改变
			current(e) {
				this.formatedPlayTime = util.formatTime(e)
			}
		}
	}
</script>
	
<style lang="scss">
	.play{
		width: 100%;
		height: 100%;
		.normal-play{
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 150;
			background: #f2f3f4;
			.bg-fix{
				position: absolute;
				left: -50%;
				top: -50%;
				width: 300%;
				height: 300%;
				z-index: -1;
				opacity: .6;
				filter: blur(60upx);
				.filter{
					position: absolute;
					width: 100%;
					height: 100%;
					background: #000;
					opacity: 0.6;
				}
				.bg-img{
					width: 100%;
					/* height: 100%; */
				}
			}
			.header{
				width: 100%;
				position: relative;
				z-index: 1;
				.back{
					position: absolute;
					top: 0;
					left: 15upx;
					z-index: 50;
					.cuIcon{
						color: #fff;
						font-weight: 700;
						font-size: 50upx;
					}
				}
				.song-name{
					width: 70%;
					margin: 0 auto;
					line-height: 40upx;
					text-align: center;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					color: #f1f1f1;
					font-size: 35upx;
					font-weight: 700;
					padding-top: 10upx;
				}
				.author{
					width: 70%;
					margin: 0 auto;
					line-height: 40upx;
					text-align: center;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					color: #f1f1f1;
				}
			}
			.middle{
				display: flex;
				align-items: center;
				position: fixed;
				width: 100%;
				top: 130upx;
				bottom: 190upx;
				white-space: nowrap;
				font-size: 0;
				.middle-l{
					vertical-align: top;
					position: relative;
					width: 100%;
					height: 0;
					padding-top: 80%;
					.cd-wrapper{
						position: absolute;
						left: 10%;
						top: 0;
						width: 80%;
						height: 100%;
						.cd{
							width: 100%;
							height: 100%;
							border: 30upx solid hsla(0,0%,100%,.5);
							border-radius: 50%;
							&.play{
								animation: cd 20s linear infinite;
							}
							&.pause{
								animation-play-state: paused;
							}
							.play-img{
								position: absolute;
								left: 0;
								top: 0;
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
					}
				}
			}
			.bottom{
				.progress-wrapper{
					display: flex;
					align-items: center;
					width: 80%;
					margin: 0 auto;
					padding: 20upx 0;
					.time{
						color: #f1f1f1;
						font-size: 22upx;
						flex: 0 0 60upx;
						line-height: 60upx;
						width: 60upx;
						padding-top: 10upx;
						&.time-l{
							text-align: left;
							/* padding-right: 20upx; */
						}
						&.time-r{
							text-align: right;
							color: #dbdbdb;
							/* padding-left: 20upx; */
						}
					}
					.progress-bar-wrapper{
						flex: 1;
						.progress-bar{
							height: 60upx;
							.bar-inner{
								position: relative;
								top: 13px;
								height: 4px;
								background: rgba(0,0,0,.3);
								.progress{
									position: absolute;
									height: 100%;
									background: #d44439;
								}
								.progress-btn-wrapper{
									position: absolute;
									left: -8px;
									top: -13px;
									width: 30px;
									height: 30px;
									.progress-btn{
										position: relative;
										top: 7px;
										left: 7px;
										box-sizing: border-box;
										width: 16px;
										height: 16px;
										border: 5px solid #f1f1f1;
										border-radius: 50%;
										background: #d44439;
									}
								}
							}
						}
					}
				}
				position: absolute;
				bottom: 100upx;
				width: 100%;
				.operators{
					display: flex;
					align-items: center;
					height: 80upx;
					.icon{
						flex: 1;
						color: #f1f1f1;
						text-align: center;
						.cuIcon{
							font-size: 60upx;
						}
						&.loop{
							.cuIcon{
								font-size: 65upx;
							}
						}
						&.left{
							.cuIcon{
								font-size: 70upx;
							}
						}
						&.play-pause{
							.cuIcon{
								font-size: 70upx;
							}
						}
						&.right{
							.cuIcon{
								font-size: 70upx;
							}
						}
					}
				}
			}
		}
	}
	@keyframes cd {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(1turn);
    }
}
</style>
